iT邦幫忙

2023 iThome 鐵人賽

DAY 8
0
Modern Web

30天前端學習筆記心得系列 第 8

Day8-Html標題段落圖片超連結

  • 分享至 

  • xImage
  •  

標題(heading)

Html所設定的標題,由<h1>~<h6>所組成的
h1標題字體最大,以此類推h6標題字體最小

<h1>2023鐵人賽</h1>
<h2>2023鐵人賽</h2>
<h3>2023鐵人賽</h3>
<h4>2023鐵人賽</h4>
<h5>2023鐵人賽</h5>
<h6>2023鐵人賽</h6>

https://ithelp.ithome.com.tw/upload/images/20230923/20163257imXUUvjkDx.png

段落(paragraph)

 製作網頁時寫出想要的文章內容

<p>第一次參加好緊張</p>

在段落調整其他標籤格式

  • <br/>換行

<p>我一定會挑戰成功</p>
<br/>
<p>加油沒問題的</p>
  • <hr/>水平分隔線

<p>我一定會挑戰成功</p>
<hr/>
<p>加油沒問題的</p>
  • <b>粗體<strong>粗體

    • strong重點強調
  • <i>斜體<em>斜體

    • em重點強調
<!--純粹文字粗體-->
<p>我一定會<b>挑戰成功</b></p>
<!--重點強調-->
<p><strong>加油沒問題的</strong></p>

<!--純粹文字斜體-->
<p>我一定會<i>挑戰成功</i></p>
<!--重點強調-->
<p><em>加油沒問題的</em></p>
  • <u>底線

<p><u>加油沒問題的</u></p>
  • <ins>新插入文字

<p>我一定會挑戰成功</p>
<ins>2023鐵人賽</ins>
<p>加油沒問題的</p>
  • <del>被刪除文字

<p>文章有寫錯字</p>
<del>文章刪除</del>
  • <center> 置中

<p><center>我一定會挑戰成功</center></p>
  • <mark>突顯或高亮文字

    • 搜尋關鍵字
    • 引用文字
    • 說明重要資訊
<p><mark>我一定會挑戰成功</mark></p>

https://ithelp.ithome.com.tw/upload/images/20230923/201632579JTnVfeurD.jpg

img

是插入圖片的元素,src連結Jpg或Png等其他圖片檔 alt圖片替代文字

<img src="image.jpg" alt="image">

a

是網頁超連結元素,用href連結其他網站

<a href="https://www.youtube.com/">YouTube</a>

Html網頁語法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>網路標題</title>
</head>
<header>
    <h1>2023鐵人賽</h1>
    <p>第一次參加很<mark>緊張</mark></p>
    <p>第二次參加很<strong>興奮</strong></p>
    <img src="./html.png" alt="Html">
    <br>
    <a href="https://www.youtube.com/"><h2>YouTube</h2></a>
</header>
<body>
</body>
</html>

https://ithelp.ithome.com.tw/upload/images/20230923/20163257ixuIKiAPSS.jpg

資料來源:Html語法


上一篇
Day7-Html架構
下一篇
Day9-Html項目列表清單
系列文
30天前端學習筆記心得34
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言